<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路线列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="res/layui.css" media="all">
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="tabChange" id="container">
    <ul class="layui-tab-title">
        <li v-for="(item,index) in routeList" :class="curIndex == index ? 'layui-this' : ''">
            {{item.routename}}
        </li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-btn-group demoTable">
                <button class="layui-btn" @click="printOrder">打印订单</button>
                <button class="layui-btn" @click="printMap" v-if="curIndex != routeList.length-1">打印地图</button>
                <button class="layui-btn" @click="viewDetail">显示详情</button>
                <button class="layui-btn" @click="sendRouteList" v-if="curIndex != routeList.length-1">全部发货</button>
            </div>
            <span v-if="orderList.length > 0 && orderList[0].time1">
                <span style="margin-left: 30px; margin-right: 10px">查询时间</span>
                <span>{{orderList[0].time1 + ' - ' + orderList[0].time2}}</span>
            </span>

            <table class="layui-hide" id="idTable" lay-filter="test"></table>
        </div>
    </div>

    <div class="add-subcat" style="display: none; padding:20px" id="addForm">
        <form class="layui-form" style="padding-top: 15px">
            <input type="hidden" v-model="form.orderid"/>
            <div class="layui-form-item">
                <label class="layui-form-label">快递公司</label>
                <div class="layui-inline">
                    <select name="express" id="express">
                        <option :value="item.value" v-for="(item, index) in expressList">{{item.value}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">快递单号</label>
                <div class="layui-inline">
                    <input type="text" name="express_no" class="layui-input" v-model="form.expressNo" autocomplete="false">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn"
                            lay-submit lay-filter="submitForm">立即提交
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="barDemo">
    {{#  if(d.order_status == 11 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="sendGoods">发货</a>
    {{#  } }}
</script>
<script src="res/layui.js" charset="utf-8"></script>
<script src="res/vue.js"></script>
<script src="./res/axios.min.js"></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '#container',
        data: {
            routeList: [],
            curIndex: 0,
            orderIdList: [],
            orderList:[],
            form: {
                express: '',expressNo:'', orderid: ''
            },
            expressList: []
        },
        methods: {
            post(url, param) {
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            initData(){
                var arr = ['<option value="">请选择</option>'];
                this.post('/education/api/dict', {'type':'deliver.company'}).then(res => {
                    let rs = res.data;
                    if(rs.code == 200){
                        this.expressList = rs.data;
                    }
                });
            },
            loadData() {
                this.initData()
                let express = {routename: '物流单', id: -1}
                this.post('/education/admin/route/list', {}).then(res=> {
                    if(res.data.status == 200) {
                        let list = res.data.data
                        list.push(express)
                        this.routeList = list;
                        this.initEvent()
                        this.getTableData(0)
                    } else {
                        layer.msg(res.data.msg||'操作失败')
                    }
                })
            },
            getTableData(index) {
                let routeid = this.routeList[index].id, that = this;

                layui.use('table', function(){
                    var table = layui.table;
                    let colArr = [
                        {field:'idx', width:80, title: '序号', sort: true}
                        ,{field:'order_no', width:200, title: '订单号', sort: true}
                        ,{field:'order_memo', title: '订单备注'}
                        ,{field:'total_amount', width:150, title: '总价（元）', sort: true}
                        ,{field:'order_status', width:120, title: '订单状态' ,templet: function(d){
                            let s = d.order_status;
                            return s == 11 ? '待发货' : (s == 20?'已发货' : '其他')
                        }}
                        ,{field:'order_username', width:150, title: '下单人', sort: true}
                        ,{field:'create_time', title: '下单时间', sort: true,  minWidth: 100}
                    ]
                    if(routeid == -1) {
                        colArr.push({fixed: 'right', width:100, title: '操作',align:'center', toolbar: '#barDemo'})
                        //这里的toolbar值是模板元素的选择器)
                    }
                    table.render({
                        elem: '#idTable'
                        ,url: '/education/admin/pages/routeList/list?_query.routeid=' + routeid + '&pageSize=200'
                        ,method:'post'
                        ,request: {
                            pageName: '_query.pageNumber' //页码的参数名称，默认：page
                            ,limitName: '_query.pageSize' //每页数据量的参数名，默认：limit
                        }
                        ,cols: [colArr]
                        ,done: function (res) {
                            let list = res.data
                            let idArr = []
                            for(let i=0; i<list.length; i++) {
                                idArr.push(list[i].id)
                            }
                            that.orderIdList = idArr
                            that.orderList = list;
                        }
                    });

                    //监听工具条
                    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                        if(layEvent === 'sendGoods'){ //查看
                            that.form.orderid = data.id
                            layer.open({
                                type: 1,
                                content: document.getElementById('addForm').innerHTML,
                                area:['400px'],
                                title: '发货',
                                success: function(layero, index){
                                    console.log(layero, index);
                                    that.showForm()
                                }
                            });
                        }
                    });
                });
            },
            showForm() {
                let that = this
                layui.use('form', function(){
                    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                    form.render('select'); //刷新select选择框渲染
                    form.on('submit(submitForm)', function(data){
                        that.sendWuliu(data.field)
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                });
            },
            initEvent() {
                let that = this;
                layui.use('element', function(){
                    var $ = layui.jquery
                        ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
                    element.on('tab(tabChange)', function(elem){
                        that.curIndex = elem.index
                        that.getTableData(elem.index)
                    });
                });
            },
            printMap() {
                window.open('./printMap.html?rid='+this.routeList[this.curIndex].id)
            },
            viewDetail() {
                let o = this.routeList[this.curIndex]
                localStorage.setItem('route-'+ o.id, o.routename);
                //window.open('./printSku.html?rid='+o.id)
                var index = layer.open({
                    type: 2,
                    content: './printSku.html?rid='+o.id,
                    "title": "路线详情",
                    area: ['550px'], "maxmin":"true"
                });
                layer.full(index)
            },
            printOrder() {
                let obj = this.routeList[this.curIndex];
                sessionStorage.setItem('printList_ids', this.orderIdList.join(','))
                sessionStorage.setItem('printList_routename', obj.routename)
                sessionStorage.setItem('printList_routeid', obj.id)
                window.open('./printList.html')
            },
            sendRouteList() {
                let that = this;
                layer.confirm('确认 <span style="color:red">发货</span> 操作吗?',  {icon: 3, title:'提示'}, function(index){
                    let list = that.orderList;
                    for(let i=0; i<list.length; i++) {
                        if(list[i].order_status != 11) {
                            layer.msg('路线中有订单不是发货状态')
                            layer.close(index);
                            return
                        }
                    }
                    let rid = that.routeList[that.curIndex].id;
                    that.post('/education/admin/pages/routeList/send/' + rid, {}).then(res=> {
                        let rs = res.data;
                        layer.msg(rs.status == 200 ? '发货成功' : rs.msg||'操作失败');
                        that.getTableData(that.curIndex)
                    });
                    layer.close(index);
                });
            },
            sendWuliu(param) {
                param.id = this.form.orderid
                this.post('/education/admin/order/send', param).then(res => {
                    let rs = res.data;
                    layer.msg(rs.status == 200 ?'发货成功' : '操作失败')
                    this.getTableData(this.curIndex)
                    layer.closeAll()
                })
            }
        }
    });
    window.onload = function () {
        app.loadData();
    }
</script>

</body>
</html>